웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트에서 가장 많이 쓰이는 조건문(분기문)이 if문이겠지만 switch 역시 굉장히 많이 쓰이는 조건문 중 하나입니다. 조건문에 대하여 간단히 설명하자면.. 해당하는 조건이 맞는 경우에 정해진 구문을 실행하도록 만든 코드가 바로 조건문입니다.
# 자바스크립트 switch 문의 장점
switch문은 필요한 조건에 만족하는 경우마다 각각 다른 조건을 매칭하여 실행시킬 수 있다는 장점이 있습니다. 또한 모든 각각의 개별조건들이 많은 경우 이를 if 문을 사용하여 처리한다면 모든 조건을 다 확인해야하는 문제가 있을 수 있습니다. 하지만 switch를 사용한 구문은 이를 모두 확인 할 필요없이 맞는 구문을 만나면 실행 후 루프에서 바로 벗어날 수 있어 자원관리에 보다 효율적이라 할 수 있죠.switch()문의 사용방법은 매우 간단합니다. 참조하는 변수에 만족하면... 즉 조건에 해당하는 값을 만나면 해당하는 case를 실행하고 끝냅니다. 아래는 간단한 조건문의 형태입니다.
switch(참조변수) { case 참일 값: 실행할 구문; }
그럼 아래에서 예제를 통해 자세히 알아보세요.
# switch() 조건문 예제 소스
그럼 아래는 조건문을 간단한 예제를 통해 알아보겠습니다. 아래의 코드는 해당하는 변수 test에 각각의 case를 설정하여 서로 다른 구문이나 함수를 실행하게 합니다. 아래 코드를 봐주세요.@ case.js
var test = 1004;
// test 변수 값을 1004로 설정
switch (test) {
case 1000 :
alert('선택한 값은 1000입니다.');
break;
case 1001 :
alert('선택한 값은 1001입니다.');
break;
case 1002 :
alert('선택한 값은 1002입니다.');
break;
case 1003 :
alert('선택한 값은 1003입니다.');
break;
case 1004 :
alert('선택한 값은 1004입니다.');
break;
default :
alert('선택한 값이 없습니다.');
break;
}
// test 변수 값을 1004로 설정
switch (test) {
case 1000 :
alert('선택한 값은 1000입니다.');
break;
case 1001 :
alert('선택한 값은 1001입니다.');
break;
case 1002 :
alert('선택한 값은 1002입니다.');
break;
case 1003 :
alert('선택한 값은 1003입니다.');
break;
case 1004 :
alert('선택한 값은 1004입니다.');
break;
default :
alert('선택한 값이 없습니다.');
break;
}
위 예제는 변수 test에 1004의 값을 설정하고 switch문(스위치문)에서 맞는 값 1004에 위치하게 되면 해당 문구 '선택한 값은 1004입니다.'를 출력한 후 break를 실행하여 switch() 문이 종료하게 됩니다. 위 예제는 숫자이지만 문자도 방법은 같습니다.
switch() 문을 사용할 때는 반드시 break가 필요합니다. break는 해당 코드를 종료하고 더 이상 코드를 실행하지 않도록 합니다. 만약 break 문이 없는 경우 계속해서 다음의 case문을 확인하게 되며 의도하지 않은 경우 원치않는 구문이 실행될 수 있으니 꼭 주의하시기 바랍니다.
만약 위 코드를 if문을 사용하였다면 어떻게 작성될까요? 아마 다음과 같을 것입니다.
# if 문 사용시 코드 보기
물론 위 switch 코드를 if문을 사용할 수 있습니다. 아래 코드는 if를 사용하였을 경우 코드입니다. 참고로 봐주세요.@ if_syntax.js
var test = 1004;
if (test == 1000) {
alert("선택값 1000");
}
else if (test == 1001) {
alert("선택값 1001");
}
else if (test == 1002) {
alert("선택값 1002");
}
else if (test == 1003) {
alert("선택값 1003");
}
else if (test == 1004) {
alert("선택값 1004");
}
else {
alert("선택값 없음");
}
if (test == 1000) {
alert("선택값 1000");
}
else if (test == 1001) {
alert("선택값 1001");
}
else if (test == 1002) {
alert("선택값 1002");
}
else if (test == 1003) {
alert("선택값 1003");
}
else if (test == 1004) {
alert("선택값 1004");
}
else {
alert("선택값 없음");
}
switch 문은 자바스크립트 작성시 매우 자주 사용되므로 반드시 알아두시면 좋겠습니다.
아래의 글도 찾고 계시지 않나요?
